<template>
  <div>
    <!-- 个人信息 -->
    <el-row class="main-top">
      <div class="avatar">
        <el-tooltip content="点击上传头像" effect="light">
          <el-upload
            accept="image/*"
            action=""
            :show-file-list="false"
            :http-request="uploadMainImg"
          >
            <el-avatar :size="120" :src="this.userInfo.imageUrl">{{userInfo.nickName}}</el-avatar>
          </el-upload>
        </el-tooltip>
      </div>
      <div class="info">
        <div>
          <span class="meta-block">&nbsp;&nbsp;&nbsp;昵称：</span>
          <span class="name">{{userInfo.nickName}}</span>
        </div>
        <div>
          <span class="meta-block">用户名：</span>
          <span class="name">{{userInfo.username}}</span>
        </div>
      </div>
    </el-row>
    <el-row>
      <el-tabs value="public" @tab-click="handleClick">
        <el-tab-pane label="公开文章" name="public">
          <article-list name="public" :page="query" :listData="articleList" @fetch-data="findUserArticleList"/>
        </el-tab-pane>
        <el-tab-pane label="私密文章" name="nopublic">
          <article-list name="nopublic" :page="query" :listData="articleList" @fetch-data="findUserArticleList"/>
        </el-tab-pane>
        <el-tab-pane label="我的提问" name="question">
          <question-list name="question" :page="query" :listData="questionList" @fetch-data="findUserQuestionList"/>
        </el-tab-pane>
        <el-tab-pane label="修改个人资料" name="user">
          <user-edit :loading="loading" :formData="userInfo" @submitForm="submitUserForm"/>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="password">
          <user-password :loading="loading" :formData="passwordData" @submitForm="submitPasswordForm"/>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
  import ArticleList from '@/components/article/List'
  import QuestionList from '@/components/question/List'
  import UserEdit from '@/components/user/Edit'
  import UserPassword from '@/components/user/Password'

  export default {
    // 引用中间件，拦截路由请求，判断是否已经身份认证
    middleware: 'auth',

    components: {QuestionList, ArticleList, UserEdit, UserPassword},

    data() {
      return {
        loading: false,
        userInfo: {
          imageUrl: ''
        },
        passwordData: { // 修改密码表单
          userId: this.$store.state.userInfo && this.$store.state.userInfo.uid
        },
        questionList: [] // 提问列表
      }
    },

    methods: {
      // 查询我的提问列表（
      async findUserQuestionList(paneName, current) {
        // 当前查询页码
        this.query.pageNum = current
        // 将isPlulic 删除
        delete this.query.isPublic

        const {data} = await this.$findUserQuestion(this.query)
        // 总记录数
        this.query.total = data.total
        // 提问列表数据
        this.questionList = data.rows
      },

      // 查询用户的文章列表
      async findUserArticleList(paneName, current) {
        this.query.pageNum = current
        // 1 公开 ，0未公开
        this.query.isPublic = paneName === 'public' ? 1 : 0
        // 发送分页查询请求
        const {data} = await this.$findUserArticle(this.query)
        // 总记录数
        this.query.total = data.total
        // 列表数据
        this.articleList = data.rows
      },

      // 切换标签页
      handleClick(tab, event) {
        switch (tab.paneName) {
          case 'public':
            // 公开
            this.findUserArticleList(tab.paneName, 1)
            break;
          case 'nopublic':
            // 私密
            this.findUserArticleList(tab.paneName, 1)
            break;
          case 'question':
            this.findUserQuestionList(tab.paneName, 1)
            break;
          case 'user':
            // 用户不用查询，在加载此页面时已经查询了
            break;
        }
      },

      // 上传头像
      uploadMainImg(file) {
        // 封装上传头像表单数据
        const data = new FormData()
        data.append('file', file.file)
        this.$uploadImg(data).then(response => {
          if (response.code === 200) {
            // 删除原图片
            this.deleteImg()
            // 回显上传后的图片
            this.userInfo.imageUrl = response.data
            // 将用户头像url更新到数据库中
            this.$updateUserInfo(this.userInfo)
          }
        }).catch(() => {
          this.$message.error('上传头像失败')
        })
      },

      // 删除头像, 上传成功后删除原来的头像
      deleteImg() {
        if (this.userInfo.imageUrl) {
          // 如果有原图地址，则删除它，
          this.$deleteImg(this.userInfo.imageUrl)
        }
      },

      // 提交修改个人资料
      async submitUserForm() {
        this.loading = true
        // 提交修改的个人信息
        // this.userInfo
        const {code, message} = await this.$updateUserInfo(this.userInfo)
        if (code === 200) {
          this.$message.success('修改成功')
        } else {
          this.$message.error(message)
        }
        this.loading = false
      },

      // 修改密码
      async submitPasswordForm() {
        // 确认中
        this.loading = true
        // 封装数据
        this.passwordData.userId =
          this.$store.state.userInfo && this.$store.state.userInfo.id
        const {code, message} = await this.$updatePassword(this.passwordData)

        if (code === 200) {
          // 清空修改密码表单
          this.passwordData = {}
          // 跳转到登录页
          this.$store.dispatch('loginPage')
        } else {
          // 修改失败
          this.$message.error(message)
        }

        this.loading = false
      }
    },

    async asyncData({app, store}) {
      // 1. 查询用户信息
      const userId = store.state.userInfo && store.state.userInfo.id
      console.log("$getUserInfo userId={}", userId)
      const {data: userInfo} = await app.$getUserInfo(userId)
      debugger
      // 2. 查询公开文章列表
      const query = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        isPublic: 1, // 1.公开，0.未公开
        userId
      }
      const {data} = await app.$findUserArticle(query)
      query.total = data.total
      return {userInfo, query, articleList: data.rows}
    },

  }
</script>
<style scoped>
  .main-top {
    padding: 30px 0;
  }

  .avatar {
    float: left;
  }

  .info {
    margin: 30px 0 0 140px;
  }

  .info .name {
    font-size: 18px;
    font-weight: 500;
    padding-top: 10px;
  }

  .info .meta-block {
    font-size: 14px;
    color: #969696;
  }
</style>
